<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  // import { prefix } from '../utils/base_url'
  const prefix = '/dp/';
  // 接收父组件传递的属性
  export let total = 0;           // 总数据条数
  export let pageSize = 10;       // 每页条数
  export let currentPage = 1;     // 当前页码
  export let showPage = false;    // 是否显示分页

  const selectPageNum = [{
    label: '10 条/页',
    value: 10
  }, {
    label: '20 条/页',
    value: 20
  }, {
    label: '50 条/页',
    value: 50
  }]

  const dispatch = createEventDispatcher();
 
  $: totalPages = Math.ceil(total / pageSize);
 
  $: pages = Array.from({ length: totalPages }, (_, i) => i + 1);

   function handlePageChange(page: number) {
    console.log(page, 'page');
    dispatch('pagechange', { pageNum: page, pageSize });
  }
   function handleChangePageNum(value: number) {
    console.log(value, 'value');
    pageSize = value;
    dispatch('pagechange', { pageNum: 1, pageSize });
  }
</script>

<div class="flex justify-end items-center border-t border-gray-700 p-4">
  <span class="text-gray-400 mr-4">共 {total} 项数据</span>
  <div class="flex items-center gap-2">
    {#if showPage}

    <select class="custom-select" style="background-image: url('{prefix}chevron-down@2x.png');" bind:value={pageSize} on:change={(e) => handleChangePageNum(Number(e.currentTarget.value))}>  
      {#each selectPageNum as item}
        <option class="text-gray-400 text-[15px]" value={item.value}>{item.label}</option>
      {/each}
    </select>
    {/if}

    <div class="flex">
      <button 
        class="px-2 py-1 border border-gray-700 rounded-l hover:bg-gray-700"
        on:click={() => handlePageChange(currentPage - 1)}
        disabled={currentPage === 1}
      >
      <span>{'<'}</span>
        <!-- <img class="custom-icon" src={prefix + "zuo@2x.png"} alt=""> -->
      </button>
      {#each pages as page}
        <button 
          class="px-3 mx-1 py-2 border border-[#1458A5] {currentPage === page ? 'bg-blue-500' : 'hover:bg-gray-700'}"
          on:click={() => handlePageChange(page)}
        >
          {page}
        </button>
      {/each}
      <button 
        class="px-2 py-1 border border-gray-700 rounded-r hover:bg-gray-700"
        on:click={() => handlePageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        <span>{'>'}</span>
        <!-- <img class="custom-icon" src={prefix + "you@2x.png"} alt=""> -->
      </button>
    </div>
  </div>
</div> 

<style scoped>
  .custom-select {
    appearance: none;
    background: #0C162D;
    border: 1px solid #20497F;
    border-radius: 4px;
    padding: 8px;
    width: 100px;
    color: white;
    /* background-image: url('/QlbDp/chevron-down@2x.png'); */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
  }

  .custom-select:focus,
  .custom-select:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .custom-icon {
    width: 16px;
    height: 16px;
  }
</style>
